<script setup>
import { onMounted, reactive, ref } from 'vue'
import { queryCategories } from '@/service/category.js'
import { ElTreeSelect } from 'element-plus'
import { Search, RefreshRight } from '@element-plus/icons-vue'
let searchForm = reactive({
  // 商品名称
  name: null,
  // 商品编码
  productId: null,
  // 商品分类
  categoryId: -1,
})
const categoryList = ref([])
onMounted(async () => {
  const res = await queryCategories()
  categoryList.value = res.data
  categoryList.value.unshift({ id: -1, name: '全部分类' })
})

const emits = defineEmits(['searchEvent', 'resetEvent'])
function onTapSearchButton() {
  emits('searchEvent', {
    productName: searchForm.name,
    productId: searchForm.productId,
    categoryId: searchForm.categoryId,
  })
}
defineExpose({
  searchForm,
})
function onTapResetButton() {
  emits('resetEvent')
}
</script>

<template>
  <div class="search-region">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="商品名称:">
        <el-input v-model="searchForm.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品编码:">
        <el-input v-model="searchForm.productId" placeholder="请输入商品编码" />
      </el-form-item>
      <el-form-item label="商品分类:">
        <el-tree-select
          v-model="searchForm.categoryId"
          :data="categoryList"
          :props="{
            label: 'name',
            children: 'children',
          }"
          :render-after-expand="false"
          check-strictly
          style="width: 200px"
          value-key="id"
        />
      </el-form-item>
    </el-form>
    <el-button :icon="Search" type="primary" @click="onTapSearchButton">搜索</el-button>
    <el-button :icon="RefreshRight" type="default" @click="onTapResetButton">重置</el-button>
  </div>
</template>

<style lang="scss" scoped>
.search-region {
  display: flex;
}
</style>
